<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		@font-face {
			font-family: 'icomoon';
			src: url('./fonts/icomoon.eot?tomleg');
			src: url('./fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
				url('./fonts/icomoon.ttf?tomleg') format('truetype'),
				url('./fonts/icomoon.woff?tomleg') format('woff'),
				url('./fonts/icomoon.svg?tomleg#icomoon') format('svg');
			font-weight: normal;
			font-style: normal;
			font-display: block;
		}

		/* div {
			float: left;
			width: 150px;
			height: 150px;
			margin-top: 50px;
			margin-right: 5px;
			border-radius: 10%;
			box-shadow: 5px 5px 10px gray;
			background-color: green;
			transition: all 5s linear;
		}

		div:hover {
			transform: translate(0%, -5%);
			transform: rotate(18000deg);
			transform: scale(50%);
			background-color: red;
		} */

         * {
			 margin: 0;
			 padding: 0;
			 box-sizing: border-box;
		 }
		input {
			position: relative;
			width: 150px;
			height: 30px;
			padding-left: 10px;
			margin-top: 20px;
		}
        i {
			position: absolute;
			font-family: 'icomoon';
			font-style: normal;
			transition: all 0.3s;
			left: 145px;
			top: 40px;
		}
		i:hover {
			transform: rotate(90deg);
		}
		
		div {
			width: 200px;
			height: 200px;
			background-color: blue;
			margin: 100px auto;
			overflow: hidden;
		}
		div p {
			width: 400px;
			height: 200px;
			background-color: skyblue;
			color: white; 
			text-align: center;
			line-height: 200px;
			transition: all 0.3s;
			transform-origin: left bottom;
		}
		
		div:nth-child(1):hover p {
			transform: translate(-50%,0);
		}
		div:nth-child(2):hover p {
			transform: rotate(90deg);
		}
	</style>
	<body>
	<!-- 	<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div> -->
		<div>
			<p>移动1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移动2</p>
		</div>
		<div>
			<p>旋转1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旋转2</p>
		</div>

	</body>
</html>
